<template>
  <div style="border: 1px solid #ebebeb; width: 100%; height: 100%" v-loading="state.loadingfiltermatch">
    <el-table
      class="filter_match_table"
      :data="state.filtermatch"
      style="width: 100%"
      height="calc( 100% - 44px )"
    >
      <el-table-column prop="matchTime" label="比赛时间" width="100">
        <template #default="scope">
          <div class="font12">{{ scope.row.matchTime }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="league_name" label="联赛" show-overflow-tooltip>
        <template #default="scope">
          <div class="font12">
            <div class="hidden2">{{ scope.row.league_name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="home_name" label="主队" align="right" show-overflow-tooltip>
        <template #default="scope">
          <div class="font12">
            <div class="hidden2">{{ scope.row.home_name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="比分" width="50">
        <template #default="scope">
          <div class="font12" style="color: #fb445f !important;">{{ scope.row.score }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="away_name" label="客队" align="left" show-overflow-tooltip>
        <template #default="scope">
          <div class="font12">
            <div class="hidden2">{{ scope.row.away_name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="half_score" label="半场" align="center">
        <template #default="scope">
          <div class="font12" style="color: #fb445f !important;">{{ scope.row.half_score }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="filter_pagination">
      <el-pagination
        class="pagination"
        @current-change="store.handlePageChange"
        v-model:current-page="state.filtermatchpage.page"
        v-model:page-size="state.filtermatchpage.page_size"
        layout=" prev, pager, next, "
        :total="state.filtermatchpage.total"
      />
    </div>
  </div>
</template>

<script setup>
const { store, state } = inject('Filter')
</script>

<style lang="scss" scoped>
.filter_match_table {
  border-radius: 0;
  border-color: #ebebeb !important;
}
.filter_pagination {
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.font12 {
  font-size: 12px;
  color: #333;
}

.hidden1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hidden2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

<style>
.filter_match_table thead {
  font-size: 12px;
  color: #778090;
}
.filter_match_table.el-table--border thead tr th.el-table__cell {
  border-right: none !important;
  border-bottom: none !important;
}
.filter_match_table.el-table--border tbody tr td.el-table__cell {
  border-right: none !important;
  border-bottom: none !important;
}

.filter_match_table .el-table__inner-wrapper {
  height: 100% !important;
}
.filter_match_table .el-table__inner-wrapper::before {
  height: 0 !important;
}

.filter_pagination .el-pager li {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
}

.filter_pagination .el-pager li.is-active {
  background-color: var(--pcmain-color);
  color: #fff;
}

.filter_match_table.el-table tbody .el-table__row td .el-tooltip {
  white-space: break-spaces !important;
}
</style>